<template>
  <div class="login">
    <div class="form-wrap">
      <div class="form-title">登录</div>
      <div class="form-content">
        <div class="form-group">
          <input type="text" class="form-control" id="uid" placeholder="用户名" v-model="uid" />
          <label for="uid">
            <i class="fa fa-user"></i>
          </label>
        </div>
        <div class="form-group">
          <input type="password" class="form-control" id="password" placeholder="密码" v-model="password" />
          <label for="password">
            <i class="fa fa-lock"></i>
          </label>
        </div>
      </div>
      <div class="form-hint" v-if="error" v-text="hint"></div>
      <div class="form-btn" @click="login">登陆</div>
      <div class="form-link">没有账号？
        <router-link to="/signup">现在注册</router-link>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';

export default {
  name: 'login',
  data() {
    return {
      uid: '',
      password: '',
      status: true,
      connect: false,
      hint: '',
      error: false,
    };
  },
  computed: {
    ...mapState({
      accountStatus: state => state.account.status,
    }),
  },
  methods: {
    login() {
      this.hideHint();
      if (!this.uid) {
        this.showHint('请输入用户名');
        return;
      }
      if (!this.password) {
        this.showHint('请输入密码');
        return;
      }
      this.$store.dispatch('login', {
        uid: this.uid,
        password: this.password,
      })
        .then(() => {
          this.$router.replace({ path: '/' });
        })
        .catch((msg) => {
          this.showHint(msg);
        });
    },
    showHint(text) {
      this.hint = text;
      this.error = true;
    },
    hideHint() {
      this.error = false;
      this.hint = '';
    },
    init() {
      if (this.accountStatus) {
        this.$router.replace({ path: '/' });
      }
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style lang="scss">
@import '../scss/theme.scss';
.form-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .form-title {
    font-size: 2.6rem;
    margin-bottom: 20px;
  }
  .form-link {
    margin-top: 20px;
    font-size: 1.3rem;
    a {
      color: darken($color_accent, 20%);
    }
  }
}

.form-group {
  font-size: 1.4rem;
  margin-bottom: 20px;
  position: relative;
  input {
    width: 260px;
    font-size: 1.4rem;
    line-height: 3rem;
    padding: 0 5px 0 35px;
    box-sizing: border-box;
    border: 2px solid $color_accent;
    border-radius: 10px;
    outline: none;
    font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", "微软雅黑", SimSun, "宋体", Heiti, "黑体", sans-serif;
  }
  label {
    position: absolute;
    line-height: 3rem;
    top: 2px;
    left: 15px;
  }
}

.form-hint {
  font-size: 1.2rem;
  color: red;
  margin-bottom: 20px;
}

.form-btn {
  cursor: pointer;
  width: 120px;
  height: 40px;
  border: 2px solid $color_accent;
  text-align: center;
  line-height: 40px;
  font-size: 1.5rem;
  transition: all 0.5s ease;
}

.login {
  margin-top: 100px;
  margin-bottom: 100px;
}
</style>
